<template>
  <div class="supplier-account-container">
    <div class="title-row">
      <SectionTitle title="收款账户" />
      <PlainCreateBtn v-if="isCreateAccount && !isModify" @click="createAccount">添加账户</PlainCreateBtn>
    </div>
    <el-table
      v-loading="listLoading"
      v-if="accountsReceivable.list"
      :data="handelData(accountsReceivable.list)"
      class="fb-table"
      element-loading-text="加载中..."
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <EmptyPlaceholder slot="empty" />
      <el-table-column type="index" width="50" align="center" label="序号"/>
      <el-table-column
        v-for="item in tableLabels"
        :key="item.key"
        :label="item.label"
        :min-width="item.width || 120"
        align="left">
        <template slot-scope="scope">
          <sensitiveInfo v-if="!isShowAccount && sensitiveFields.includes(item.key)" :params-obj="paramsObj" :format-text="getFormatText(item.key, scope.row[item.key])" @setSensitive="setSensitive" />
          <!-- <SecretText v-else-if="item.key === 'tel'" :log-text="''" :origin-text="scope.row[item.key]" /> -->
          <el-tooltip v-else-if="scope.row[item.key] || item.key === 'isBindCloud'" placement="top" effect="dark">
            <div slot="content" style="max-width:200px;">
              <span v-if="item.key === 'province'">{{ scope.row[item.key].replace(/,/g, '-') }}</span>
              <span v-else-if="item.key === 'isBindCloud'">{{ getBindValue(scope.row[item.key]) }}</span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </div>
            <div class="ellipsis">
              <span v-if="item.key === 'province'">{{ scope.row[item.key].replace(/,/g, '-') }}</span>
              <span v-else-if="item.key === 'isBindCloud'">{{ getBindValue(scope.row[item.key]) }}</span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </div>
          </el-tooltip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column v-if="!isModify" align="left" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <div class="operate-row">
            <div class="operate-btn edit" @click="handleEdit(scope.row, scope.$index)">编辑</div>
            <div class="operate-btn del" @click="handleDelete(scope.row.id, scope.$index)">删除</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-if="accountsReceivable.list && accountsReceivable.list.length > 10"
        :current-page="page"
        :page-size="perPage"
        :total="accountsReceivable.list.length"
        :page-sizes="[10,20, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    <createSupplierAccount ref="createSupplierAccountRef" :supplier-type="supplierType" @updateData="updateData" @addData="addData" @editData="editData" />
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import createSupplierAccount from './createSupplierAccount';
import sensitiveInfo from '@/components/SupplierComponent/sensitiveInfo';
import { delAccount } from '@/api/supplier';
export default {
  name: 'SupplierAccountTable',
  components: {
    SectionTitle,
    EmptyPlaceholder,
    createSupplierAccount,
    sensitiveInfo
  },
  props: {
    accountsReceivable: {
      type: Object,
      default: () => ({
        list: []
      })
    },
    supplierType: { // 0:个人 1:公司
      type: Number | String,
      default: 0
    },
    isCreateAccount: {
      type: Boolean,
      default: false
    },
    isShowAccount: {
      type: Boolean,
      default: false
    },
    supplierId: {
      type: Number,
      default: null
    },
    parentSupplierId: {
      type: Number,
      default: null
    },
    showMobilePage: {
      type: Boolean,
      default: false
    },
    isModify: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listLoading: false,
      page: 1,
      perPage: 10,
      sensitiveFields: ['payName', 'payNum', 'identityNumber', 'isBindCloud', 'tel']
    };
  },
  computed: {
    // openCloudStatus() {
    //   return this.accountsReceivable.isOpenCloud ? '是' : '否';
    // },
    paramsObj() {
      const { type } = this.$route.query;
      return {
        type: 0,
        fieldType: 1,
        channelId: type ? this.parentSupplierId : this.supplierId
      };
    },
    tableLabels() {
      const arr = [
        { key: 'payName', label: '收款户名', width: 150 },
        { key: 'payNum', label: '收款账号', width: 180 },
        { key: 'identityNumber', label: '身份证号', width: 180 },
        { key: 'tel', label: '联系电话', width: 120 },
        { key: 'bank', label: '银行', width: 150 },
        { key: 'province', label: '省市', width: 180 },
        { key: 'subBank', label: '支行', width: 160 },
        { key: 'createUserName', label: '创建人' },
        { key: 'departmentName', label: '所属部门', width: 120 },
        { key: 'payPlatform', label: '支付平台', width: 120 }
      ];
      if (this.supplierType === 0) {
        arr.unshift(
          { key: 'isBindCloud', label: '云账户', width: 130 },
        );
      }
      return arr;
    }
  },
  methods: {
    updateData() {
      this.$emit('updateData');
    },
    getBindValue(num) {
      const bindData = {
        0: '已绑定',
        1: '未绑定'
      };
      return bindData[num] || '--';
    },
    handleTabClick(index) {
      this.accountsInfoItem = this.signUpInfo.accountsInfoList[index];
    },
    // 本地分页
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handelData(data) {
      return data.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    createAccount() {
      if (!this.supplierType && this.supplierType !== 0) {
        this.$message.warning('请先选择供应商类型');
        return;
      }
      const supplierId = Number(this.$route.params.id) || null;
      this.$refs.createSupplierAccountRef.openDialog(supplierId);
    },
    getFormatText(key, data) {
      let res = '****';
      if (!data) return res;
      switch (key) {
        case 'payName':
          res = `****${data.substring(data.length - 1)}`;
          break;
        case 'payNum':
        case 'identityNumber':
          res = `****${data.substring(data.length - 4)}`;
          break;
        default:
          break;
      }
      return res;
    },
    handleEdit(row, index) {
      this.$refs.createSupplierAccountRef.openDialog(this.supplierId, row, index);
    },
    handleDelete(id, index) {
      this.$confirm('是否确定删除', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        if (id) {
          delAccount(this.supplierId, { id }).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.$emit('updateData');
            }
          }).catch(err => {
            console.error(err);
          });
        } else {
          this.$emit('delData', index);
        }
      });
    },
    setSensitive() {
      if (!this.isShowAccount) {
        this.$emit('setSensitive', 'isShowAccount');
      }
    },
    addData(data) {
      this.$emit('addData', data);
    },
    editData(data, index) {
      this.$emit('editData', data, index);
    }
  }
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
}
.supplier-account-container {
  background-color: #fff;
  padding: 16px 24px 10px 24px;
  position: relative;
  .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .title-tip {
    font-weight: normal;
    color: #999;
    font-size: 14px;
    margin: 0 6px;
  }
  ::v-deep .el-radio__label {
    padding-left: 4px;
  }
  ::v-deep .cell {
    display: flex;
  }
  ::v-deep .el-radio {
    line-height: 14px;
  }
  ::v-deep .empty-class {
    padding: 0;
  }
  ::v-deep .sensitive {
    display: flex;
    justify-content: center;
    align-items: center;
    .info-icon-img {
      margin-top: -2px;
    }
  }
  .operate-row {
    display: flex;
    align-items: center;
    .operate-btn {
      cursor: pointer;
      color: #406eff;
      &.edit {
        margin-right: 16px;
        position: relative;
        &::after {
          content: '|';
          position: absolute;
          right: -8px;
          width: 1px;
          height: 24px;
          color: #999;
        }
      }
    }
  }
}
</style>
